<template>
	<!-- 图片魔方 -->
	<div class="component-item">
		<div class="magic-box">
			<div class="diy-style-1" v-if="item.style == 1"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}" @click="navTo(item.images[0].href)">
					<div class="empty-img-box" v-if="!item.images[0]">
						<i class="el-icon-picture"></i>
					</div>
					<img :src="item.images[0].url" mode="widthFix" v-else />
				</div>
			</div>
			<div class="diy-style-2" v-if="item.style == 2"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-2-item" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else/>
					</div>
					<div class="style-2-item" @click="navTo(item.images[1].href)">
						<div class="empty-img-box" v-if="!item.images[1]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[1].url" mode="widthFix" v-else />
					</div>
				</div>
			</div>
			<div class="diy-style-3" v-if="item.style == 3"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-3-item" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else />
					</div>
					<div class="style-3-item" @click="navTo(item.images[1].href)">
						<div class="empty-img-box" v-if="!item.images[1]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[1].url" mode="widthFix" v-else />
					</div>
					<div class="style-3-item" @click="navTo(item.images[2].href)">
						<div class="empty-img-box" v-if="!item.images[2]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[2].url" mode="widthFix" v-else />
					</div>
				</div>
			</div>
			<div class="diy-style-4" v-if="item.style == 4"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-left" style="border-right:none" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else />
					</div>
					<div class="style-right">
						<div class="style-top" style="border-bottom:none" @click="navTo(item.images[1].href)">
							<div class="empty-img-box" v-if="!item.images[1]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[1].url" mode="widthFix" v-else />
						</div>
						<div class="style-down" @click="navTo(item.images[2].href)">
							<div class="empty-img-box" v-if="!item.images[2]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[2].url" mode="widthFix" v-else />
						</div>
					</div>
				</div>
			</div>
			<div class="diy-style-5" v-if="item.style == 5"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-5-item" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else />
					</div>
					<div class="style-5-item" @click="navTo(item.images[1].href)">
						<div class="empty-img-box" v-if="!item.images[1]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[1].url" mode="widthFix" v-else />
					</div>
					<div class="style-5-item" @click="navTo(item.images[2].href)">
						<div class="empty-img-box" v-if="!item.images[2]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[2].url" mode="widthFix" v-else />
					</div>
					<div class="style-5-item" @click="navTo(item.images[3].href)">
						<div class="empty-img-box" v-if="!item.images[3]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[3].url" mode="widthFix" v-else />
					</div>
				</div>
			</div>
			<div class="diy-style-6" v-if="item.style == 6"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-left" style="border-right:none">
						<div class="style-top" style="border-bottom:none" @click="navTo(item.images[0].href)">
							<div class="empty-img-box" v-if="!item.images[0]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[0].url" mode="widthFix" v-else />
						</div>
						<div class="style-down" @click="navTo(item.images[1].href)">
							<div class="empty-img-box" v-if="!item.images[1]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[1].url" mode="widthFix" v-else />
						</div>
					</div>
					<div class="style-right">
						<div class="style-top" style="border-bottom:none" @click="navTo(item.images[2].href)">
							<div class="empty-img-box" v-if="!item.images[2]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[2].url" mode="widthFix" v-else />
						</div>
						<div class="style-down" @click="navTo(item.images[3].href)">
							<div class="empty-img-box" v-if="!item.images[3]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[3].url" mode="widthFix" v-else />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cTitle",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			menuMap: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			// 页面跳转
			navTo(url) {
				if (this.menuMap.indexOf(url) != -1) {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>

<style>
</style>